import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styles from './style.module.scss';
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';
class ScoreSwiper extends PureComponent {
    constructor (props) {
        super(props);
        this.state = {
            winHeight: document.documentElement.clientHeight,
            // data: [
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            //     {
            //         img: 'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/bVWAzXJFS2_1544427376613.jpg'
            //     },
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            // ]
        }
    }
    render () {
        const { winHeight } = this.state;
        const { closeEnlarge , data} = this.props;
        return (
            <div className={styles['scoer-enlarge']}>
                <div className={styles['enlarge-mask']}></div>
                <div className={styles['swiper-button']}>
                    <div className={styles['swiper-button-prev']} ref={swiperButtonPrev => this.swiperButtonPrev = swiperButtonPrev}>
                    </div>
                    <div className={styles['swiper-button-next']} ref={swiperButtonNext => this.swiperButtonNext = swiperButtonNext}>
                    </div>
                </div>
                <div className={styles['full-close']} onClick={()=>{closeEnlarge(false)}}></div>
                <div className={styles['scoer-img']}>
                    <div className={`swiper-container ${styles['swiper-container']}`} ref={scoreSwiper => this.scoreSwiper = scoreSwiper}>
                        <div className={`swiper-wrapper ${styles['swiper-wrapper']}`}>
                            {
                                data.map( (item,index) => {
                                    return (
                                        <div className={`swiper-slide swiper-no-swiping ${styles['swiper-slide']}`}  key={JSON.stringify(item)+index}>
                                            <div className={styles['img-list']}>
                                                <div className={styles['show-img']}>
                                                    <img src={item} style={{height: winHeight + 'px'}} alt=""/>                        
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount () {
        const { index } = this.props;
        const self = this;
        this.scoreSwiper = new Swiper (self.scoreSwiper, {
            speed: 500,
            effect : 'fade',
            initialSlide: index,
            mousewheel: false,
            navigation: { // 如果需要前进后退按钮
              nextEl: self.swiperButtonNext,
              prevEl: self.swiperButtonPrev
            },
        });
        // 设置图片高度
        window.onresize = () => {
            let height =  document.documentElement.clientHeight;
            this.setState({
                winHeight: height
            })
        }
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(ScoreSwiper));